<html>
	<head>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dijit/themes/tundra/tundra.css" />
        <script type="text/javascript">
            var dojoConfig = {
                parseOnLoad: true,
                isDebug: true,
                locale: 'ru-ru',
            };
        </script>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js"></script>

        <script type="text/javascript">
            dojo.require("dojo.data.ItemFileReadStore");
            dojo.require("dijit.form.FilteringSelect");
            dojo.ready(function() {
                
            });
            var storeData =   {
                identifier : 'abbr',
                label      : 'name',
                items      : [
                    { abbr : 'ec', name : 'Ecuador',           capital : 'Quito' },
                    { abbr : 'eg', name : 'Egypt',             capital : 'Cairo' },
                    { abbr : 'sv', name : 'El Salvador',       capital : 'San Salvador' },
                    { abbr : 'gq', name : 'Equatorial Guinea', capital : 'Malabo' },
                    { abbr : 'er', name : 'Eritrea',           capital : 'Asmara' },
                    { abbr : 'ee', name : 'Estonia',           capital : 'Tallinn' },
                    { abbr : 'et', name : 'Ethiopia',          capital : 'Addis Ababa' }
            ]};



            ///-----
            dojo.require("dojo.data.ItemFileReadStore");
            dojo.require("dijit.form.Button");

            var storeData = { identifier: 'name',
              items: [
                { name: 'Adobo', aisle: 'Mexican', price: 3.01 },
                { name: 'Balsamic vinegar', aisle: 'Condiments', price: 4.01 },
                { name: 'Basil', aisle: 'Spices', price: 3.59  },
                { name: 'Bay leaf', aisle: 'Spices',  price: 2.01 },
                { name: 'Beef Bouillon Granules', aisle: 'Soup',  price: 5.01 },
                { name: 'Vinegar', aisle: 'Condiments',  price: 1.99  },
                { name: 'White cooking wine', aisle: 'Condiments',  price: 2.01 },
                { name: 'Worcestershire Sauce', aisle: 'Condiments',  price: 3.99 },
                { name: 'pepper', aisle: 'Spices',  price: 1.01  }
              ]};

            function init() {
                function getAllItems(){

                    function clearSortedList(size, request) {
                        var list = dojo.byId('sortedList');
                        if (list) {
                            while (list.firstChild) {
                                list.removeChild(list.firstChild);
                            }
                        }
                    }

                    function clearUnSortedList(size, request){
                        var list = dojo.byId('unSortedList');
                        if (list) {
                            while (list.firstChild) {
                                list.removeChild(list.firstChild);
                            }
                        }
                    }

                   function gotSortedItems(items, request) {
                        var list = dojo.byId("sortedList");
                        if (list) {
                            var i;
                            for (i = 0; i < items.length; i++) {
                                var item = items[i];
                                var field = document.createElement('b');
                                field.appendChild(document.createTextNode('Price: '));
                                list.appendChild(field);
                                list.appendChild(document.createTextNode(foodStore.getValue(item, 'price')));
                                list.appendChild(document.createTextNode('  '));

                                var field = document.createElement('b');
                                field.appendChild(document.createTextNode('Aisle: '));
                                list.appendChild(field);
                                list.appendChild(document.createTextNode(foodStore.getValue(item, 'aisle')));
                                list.appendChild(document.createTextNode('  '));
                                field = document.createElement('b');
                                field.appendChild(document.createTextNode('Name: '));
                                list.appendChild(field);
                                list.appendChild(document.createTextNode(foodStore.getValue(item, 'name')));
                                list.appendChild(document.createTextNode('  '));
                                list.appendChild(document.createElement('br'));
                            }
                        }
                    }

                    function gotUnSortedItems(items, request) {
                        var list = dojo.byId('unSortedList');
                        if (list) {
                            var i;
                            for (i = 0; i < items.length; i++) {
                                var item = items[i];
                                
                                var field = document.createElement('b');
                                field.appendChild(document.createTextNode('Price: '));
                                list.appendChild(field);
                                list.appendChild(document.createTextNode(foodStore.getValue(item, 'price')));
                                list.appendChild(document.createTextNode('  '));

                                var field = document.createElement('b');
                                field.appendChild(document.createTextNode('Aisle: '));
                                list.appendChild(field);
                                list.appendChild(document.createTextNode(foodStore.getValue(item, 'aisle')));
                                list.appendChild(document.createTextNode('  '));
                                field = document.createElement('b');
                                field.appendChild(document.createTextNode('Name: '));
                                list.appendChild(field);
                                list.appendChild(document.createTextNode(foodStore.getValue(item, 'name')));
                                list.appendChild(document.createTextNode('  '));
                                list.appendChild(document.createElement('br'));
                            }
                        }
                    }

                    function fetchFailed(error, request) {
                        alert('lookup failed.');
                    }

                    foodStore.fetch({onBegin: clearSortedList, onComplete: gotSortedItems, onError: fetchFailed, sort: [{ attribute: 'price'}, {attribute: 'name'}]});

                    foodStore.fetch({onBegin: clearUnSortedList, onComplete: gotUnSortedItems, onError: fetchFailed});
                }
                
                dojo.connect(button, 'onClick', getAllItems);
            }
              
            dojo.ready(init);
            ///-----
        </script>


    </head>
    <body class="tundra">
        <div data-dojo-type="dojo.data.ItemFileReadStore" data-dojo-props="data:storeData" data-dojo-id="countryStore"></div>
        <div data-dojo-type="dijit.form.FilteringSelect" data-dojo-props="store:countryStore, searchAttr:'name'"></div>
        <hr />
        <div data-dojo-type="dojo.data.ItemFileReadStore" data-dojo-props="data:storeData" data-dojo-id="foodStore"></div>
        <div data-dojo-type="dijit.form.Button" data-dojo-id="button">Click me to show sorted and unsorted lists!</div>
        <br>
        <br>
        <b>Отсортированный список по полю "price":</b>
        <br>
        <span id="sortedList">
        </span>
        <br>
        <br>
        <b>Не сортированный список:</b>
        <br>
        <span id="unSortedList">
        </span>
    </body>
</html>